<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>m</title>
    <style>
        .active {
            border: 1px solid pink;
        }
    </style>
</head>

<body>
    <div>
        <select name="" id="size" onchange="sizeChange()">
            <option value="12">12px</option>
            <option value="24">24px</option>
            <option value="36">36px</option>
        </select>
        <select name="" id="color" onchange="colorChange()">
            <option value="red">red</option>
            <option value="green">green</option>
            <option value="pink">pink</option>
        </select>
    </div>
    <input type="button" value="切换" onclick="changeFun()">
    <!-- onmouseenter鼠标移入 -->
    <!-- onmouseleave鼠标移出 -->
    <div id="demo" onmouseenter="mouseenterFun()" onmouseleave="mouseLeaveFun()" style="font-size: 12px;color: aquamarine;">hello</div>
    <script>
        function changeFun() {
            var demo = document.getElementById("demo");
            if (demo.style.display == "none") {
                demo.style.display = "block";
            } else {
                demo.style.display = "none";
            }
        }

        function mouseenterFun() {
            document.getElementById("demo").className = "active";
        }

        function mouseLeaveFun() {
            document.getElementById("demo").className = "";
        }

        function sizeChange() {
            var size = document.getElementById("size").value;
            var demo = document.getElementById("demo");
            demo.style.fontSize = size + "px";
        }

        function colorChange() {
            console.log("执行");
            var color = document.getElementById("color").value;
            var demo = document.getElementById("demo");
            demo.style.color = color;
        }
    </script>
</body>

</html>

</html>